<template>
  <view class="container">
    <view class="record-list">
      <view class="record" v-for="(item, index) in records" :key="index">
        <view class="record-main">
          <text class="record-title">{{ item.title }}</text>
        </view>
        <view class="record-footer">
          <text class="record-date">{{ item.date }}</text>
        </view>
		<text class="record-amount">{{ item.amount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        { title: "大美汽车维修店·洗车", date: "2023.3.11 11:09", amount: "-50元" },
        { title: "大美汽车维修店·洗车", date: "2023.3.11 11:09", amount: "-50元" },
        { title: "大美汽车维修店·洗车", date: "2023.3.11 11:09", amount: "-50元" }
      ]
    }
  }
}
</script>

<style>
	
.container {
  padding: 20rpx;
}

.header {
  background-color: #007AFF;
  padding: 20rpx;
  text-align: center;
}

.title {
  color: white;
  font-size: 36rpx;
}

.record-list {
  margin-top: 20rpx;
  background-color: #F7F7F7;
}

.record {
  background-color: #FFFFFF;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  display: block;
  justify-content: space-between;
  align-items: center;
}

.record-title {
  font-size: 32rpx;
  color: #333;
  float: left;
}

.record-amount {
  font-size: 32rpx;
  color: black;
  width: 25%;
  float: right;
  font-weight: 500;
  display: block;
  /* background-color: orange; */
  /* float: right; */
  height: 170rpx;
  margin-top: -170rpx;
  line-height: 170rpx;
  text-align: center;
}

.record-footer {
  margin-top: 10rpx;
  color: #999;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  /* background-color: #f00; */
  width: 70%;
}
/* 设置 */
.record-main > text{
	display: block;
	height: 70rpx;
	line-height: 70rpx;
	/* background-color: #007AFF; */
}
.record-main{
	/* background-color: #007AFF; */
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
	width: 70%;
	/* float: left; */
}
</style>
